<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>培训试题</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <script type="text/javascript" src='/dist/PDFViewer/pdfobject.min.js'></script>

    <style>
        ol, ul, li {
            list-style: none;
        }

        .question {
            margin: 12px 0;
            border-radius: 4px;
            background-color: #ffffff;
            border: solid 2px #cdcdcd;
            /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);*/
            position: relative;
            overflow: visible;
            color: #484848;
            text-align: left;
        }

        .question .q_content {
            padding: 18px 40px 18px 30px;
        }

        .question .q_content .q_title_wrap {
            position: relative;
            padding-left: 22px;
            width: 950px;
        }

        .question .q_content .q_title_wrap .q_seq {
            position: absolute;
            left: 10px;
            top: 1px;
            font-size: 16px;
            color: #484848;
            font-weight: bold;
        }

        .survey_main .content_editable {
            box-sizing: border-box;
            border-radius: 2px;
            border: solid 1px transparent;
            color: #484848;
        }

        .question .q_content .q_title_wrap .q_title {
            padding: 6px 10px;
            font-size: 15px;
            width: 400px;

        }

        .question .q_content .q_option_ul {
            padding-right: 184px;
        }

        .question .q_content .q_option_ul > li {
            margin: 10px 0 0;
            padding: 3px 0 0 40px;
            position: relative;
            box-sizing: border-box;
        }

        .question .q_content .q_option_list {
            margin: 6px 0 0 16px;
        }

        .lookTitle {
            height: 20px;
            line-height: 20px;
            /* font-size: 20px; */
            font-weight: bold;
        }

        .survey_main .content_editable {
            box-sizing: border-box;
            border-radius: 2px;
            border: solid 1px transparent;
            color: #484848;
        }

        .question .q_content .icon_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: solid 1px #aaaaaa;
            background-color: #ffffff;
            cursor: pointer;
            position: absolute;
            top: 4px;
            left: 8px;
        }

        .question .q_content .icon_active_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            /*background-color: #0076FF;*/
            background: url("/dist/img/duigou2.png") -2px center no-repeat;

            position: absolute;
            top: 4px;
            left: 8px;
        }

        .question .q_content .q_option_ul > li .option_title {
            /*padding: 5px 10px 5px 5px;*/
            font-size: 14px;
            line-height: 1.43;
            min-height: 20px;
            word-wrap: break-word;
        }

        .questionNum {
            font-size: 16px;
            /* padding-top: 5px; */
            width: 20px;
            display: block;
            float: left;
        }

        .cz {
            position: absolute;
            right: 0;
            top: 0;
        }

        .cz div {
            float: left;
            width: 50px;
            text-align: center;
            color: #2b669a;
        }

        .cz .romove {
            color: red;
        }

        html, body, #pdf_viewer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: white;
        }

        table {
            border: none;
        }

        img {
            height: 100%;
            width: 100%;
            float: left;
            margin: 10px;
            object-fit: cover;

        }
    </style>
</head>
<body>
<section class="content" id="app" style="padding: 10px">
    <div class="div-td-content-more"><i></i></div>

    <table class="table-detail" border=0 cellSpacing=0 cellPadding=0
           style="width: 100%;border-bottom: none;border-left: none;position: relative;">
        <tbody>

        <template v-if="houZui()">

            <tr class="no-print">
                <td style="">
                    <div v-for="(attach,i) in fileList" v-if="attach.name!=''">
                        <div v-if="attach.name"
                             style="border: 1px solid #cbcbcd;float: left;width: 100%;">
                            <img v-if="attach.name" :src="attach.url"
                                 @click="openImg(attach.url)" style="margin: 0;">
                        </div>
                        <div v-else
                             style="border: 1px solid #cbcbcd;float: left;margin-top: 5px;">
                            <img src="/dist/img/zwImg.png" style="margin: 0;">
                        </div>
                    </div>
                </td>
            </tr>
        </template>
        <template v-else>

            <div style="background-color: white;width: 100%;height: 10px;display: none;position: fixed;top: 0;"
                 id="hideDiv">

            </div>
            <div style="background-color: #d24726;width: 20%;height: 21px;display: none;position: absolute;bottom: 120px;right: 0px;margin-bottom: -116px;"
                 id="hidePPTDiv">

            </div>
            <tr class="no-print  ">

                <iframe id="ifAttach" class="" style="width: 100%;border: 0px;overflow: hidden;"></iframe>
            </tr>
        </template>
        <tr class="no-print" v-if="passFlag==0" style="border: none">
            <td class=" no-print td-module"
                style="height: 24px; line-height: 26px;background-color: white !important;border: none">
                <div style="float: left"><input type="checkbox" v-bind:checked="isChecked" v-on:click="handleDisabled"
                                                style="float: left; margin-top: 7px;margin-right: 5px"/>
                    已阅读完毕
                </div>
                <input type="button" value="进入测试" class="btn oaBtn btn-sm" v-if="isChecked" @click="goDaTi()"/>
            </td>
        </tr>
        </tbody>
    </table>

</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            readFlag: 0,
            pdfUrl: '',
            endTime: '',
            passFlag: $.wyui.page.urlParams.passFlag ? $.wyui.page.urlParams.passFlag : 1,//是否通过
            isDisabled: false,
            isChecked: false,
            pageType: $.wyui.page.urlParams.pageType ? $.wyui.page.urlParams.pageType : 'look',//页面类型
            info: {
                id: $.wyui.page.urlParams.id ? $.wyui.page.urlParams.id : '',
                repaymentAttachName: "",
                repaymentAttachUrl: "",
            },
            fileList: [],
        },
        methods: {
            handleDisabled: function () {
                this.isChecked = !this.isChecked;

            },
            goDaTi: function () {
                var that = this;
                top.closeTabByPageId("daTi");
                top.addTabs({
                    id: 'daTi',
                    title: '答题',
                    close: true,
                    url: 'exam/daTi.html?id=' + that.info.id,
                });
            },
            houZui: function (name) {
                var that = this;
                if (name) {
                    var type = name.substring(name.lastIndexOf('.') + 1);
                    console.log(type)
                    var houZui = 'jpg gif png bmp tif emf wmf ico raw';
                    if (houZui.indexOf(type) >= 0) {
                        return true;
                    } else {
                        return false;
                    }
                    return true;
                } else {
                    if (that.info.repaymentAttachUrl.indexOf('jpg') != -1 || that.info.repaymentAttachUrl.indexOf('gif') != -1 || that.info.repaymentAttachUrl.indexOf('png') != -1 || that.info.repaymentAttachUrl.indexOf('bmp') != -1 || that.info.repaymentAttachUrl.indexOf('tif') != -1 || that.info.repaymentAttachUrl.indexOf('emf') != -1 || that.info.repaymentAttachUrl.indexOf('ico') != -1 || that.info.repaymentAttachUrl.indexOf('raw') != -1 || that.info.repaymentAttachUrl.indexOf('wmf') != -1) {
                        return true;
                    } else {
                        return false;
                    }
                }
                return false;
            },

            download: function () {

            },
            fjStyle: function (fjName) {
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            },
            haveTime: function () {
                var that = this;
                var diff = new Date(that.endTime).getTime() - new Date().getTime();//时间差的毫秒数

                //计算出相差天数
                var days = Math.floor(diff / (24 * 3600 * 1000));

                //计算出小时数
                var leave1 = diff % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数
                var hours = Math.floor(leave1 / (3600 * 1000));
                //计算相差分钟数
                var leave2 = leave1 % (3600 * 1000);        //计算小时数后剩余的毫秒数
                var minutes = Math.floor(leave2 / (60 * 1000));

                //计算相差秒7数
                var leave3 = leave2 % (60 * 1000);      //计算分钟数后剩余的毫秒数
                var seconds = Math.round(leave3 / 1000);

                var returnStr = "";
                if (days > 0) {
                    returnStr = days + "" + returnStr;
                } else {
                    returnStr = "0" + returnStr;
                }
                if (hours >= 0) {
                    if (hours == 0 && minutes < 0) {
                        return "已截止"
                    }
                } else {
                    return "已截止"
                }
                return returnStr;
            },


            downloadFilePDF: function (attachId, fileName) {
                var sUrl = server.ip + '/attach/downloadPDF.json?fileUrl=' + attachId + '&fileName=' + fileName;
                console.log(myBrowser())
                if (myBrowser() === "IE" || myBrowser() === "Edge") {
                    var oPop = window.open(attachId, "", "width=1, height=1, top=5000, left=5000");
                    for (; oPop.document.readyState != "complete";) {
                        if (oPop.document.readyState == "complete") break;
                    }
                    oPop.document.execCommand("SaveAs");
                    oPop.close();
                } else {
                    //iOS devices do not support downloading. We have to inform user about this.
                    if (/(iP)/g.test(navigator.userAgent)) {
                        alert('Your device does not support files downloading. Please try again in desktop browser.');
                        return false;
                    }

                    if (window.downloadFile.isChrome || window.downloadFile.isSafari) {

                    }

                    if (sUrl.indexOf('?') === -1) {
                        sUrl += '?download';
                    }

                    return sUrl;

                }
            },


            fileList1: function () {
                var that = this;
                var attachUrl = that.fileList[0].url;
                var fileName = that.fileList[0].name;
                var sUrl = "https://docview.mingdao.com/op/view.aspx?src=" + attachUrl;
                var fileType = fileName.substring(fileName.lastIndexOf("."));
                switch (fileType) {
                    case ".pdf":
                        sUrl = that.downloadFilePDF(attachUrl, fileName);
                        $("#ifAttach").css("margin-top", "-50px")
                        $("#ifAttach").addClass("iframeHpdf")
                        $("#hideDiv").show();
                        setIFrameH()
                        break;
                    case ".ppt":
                    case ".pptx":
                        $("#hidePPTDiv").show();
                        $("#ifAttach").css("margin-top", "-28px")
                        $("#hidePPTDiv").css("margin-bottom", "-116px")
                        $("#ifAttach").removeClass("iframeHpdf")
                        $("#ifAttach").addClass("iframeHppt")
                        setIFrameH()
                        break;
                    case ".doc":
                    case ".docx":
                        $("#hideDiv").show();
                        $("#ifAttach").css("margin-top", "-30px")
                        $("#ifAttach").removeClass("iframeHpdf")
                        $("#ifAttach").addClass("iframeHword")
                        setIFrameH()
                        break;
                    case ".xls":
                    case ".xlsx":
                        $("#hideDiv").show();
                        $("#ifAttach").css("margin-top", "-56px")
                        $("#ifAttach").removeClass("iframeHpdf")
                        $("#ifAttach").addClass("iframeHexcel")
                        setIFrameH()
                        break;
                    default :
                        sUrl = '';
                        break;
                }
                console.log(sUrl)
                $("#ifAttach").attr("src", sUrl)
            },


        },
        mounted: function () {
            var that = this;
            $.wyui.postLoadMethod(urlConfig.exam.getExamMainById, {id: that.info.id}, function (data) {
                var info = data.result;
                that.info.repaymentAttachName = info.repaymentAttachName;
                that.info.repaymentAttachUrl = info.repaymentAttachUrl;
                var repaymentAttachNames = info.repaymentAttachName;
                var repaymentAttachUrls = info.repaymentAttachUrl;
                var repaymentAttachNameList = repaymentAttachNames.split(',');
                var repaymentAttachUrlList = repaymentAttachUrls.split(',');
                for (var i = 0; i < repaymentAttachUrlList.length; i++) {
                    if (repaymentAttachNameList[i] != '' && repaymentAttachUrlList[i] != '') {
                        var attach = {
                            name: repaymentAttachNameList[i],
                            url: repaymentAttachUrlList[i],
                        }
                        that.fileList.push(attach);
                    }

                }
                that.fileList1();
            }, false, false)
        }
    })
</script>

</body>
</html>